<template>
  <div id="top">
    <div id="show" @click="show"></div>
    <div id="topright">
      <div id="mean" class="flowR">
        <el-dropdown>
          <span class="el-dropdown-link">
            <i class="el-icon-arrow-down top flowR"></i>
            <div id="headerRight" class="flowR">
              <span :title="username">{{ username }}</span>
            </div>
            <div id="headerLeft" class="flowR" :style="{ backgroundImage: 'url(' + myurl + ')' }"></div>
          </span>
          <el-dropdown-menu slot="dropdown">
            <div style="background:#ededed;padding: 10px 10px ;width:200px">
              <p>用户id：{{ userinfo.id }}</p>
              <p>姓名：{{ userinfo.xingMing }}</p>
              <p>账号：{{ userinfo.zhangHao }}</p>
            </div>
            <span @click="$router.push({ name: 'test' })"><el-dropdown-item command="a">个人信息</el-dropdown-item></span>
            <span @click="logOut">
              <el-dropdown-item command="b">
                退出登录
                <i class="el-icon-edit-outline flowR top2"></i>
              </el-dropdown-item>
            </span>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import { getStorage, setStorage, removeStorage } from '../../assets/js/storage';
import { mapActions } from 'vuex';

export default {
  props: ['myurl', 'username', 'userinfo'],
  data() {
    return {
      isshow: true,
    };
  },
  created() {
    // console.log(this.userinfo,this.username);
  },

  methods: {
    ...mapActions(['tongyong']),

    show() {
      if (!this.isshow) {
        $('.is-vertical').css('marginLeft', 0);
        this.isshow = !this.isshow;
      } else {
        $('.is-vertical').css('marginLeft', '-250px');
        this.isshow = !this.isshow;
      }
    },
    async logOut() {
      await this['tongyong']({
        name: 'LOGOUT',
      }).then(resp => {
        console.log(resp);
      });
      this.$router.push({ name: 'login' });
      removeStorage('user');
      removeStorage('token');
    },
  },
};
</script>

<style scoped>
* {
  color: #5e6974;
}

#show {
  float: left;
  height: 60px;
  width: 60px;
  background-color: red;
  background: url('../../assets/img/show.png') center center;
  background-repeat: no-repeat;
  background-size: 60% 55%;
}
#show:hover {
  box-shadow: 0px 0px 10px 1px #888888;
}
#show:active {
  box-shadow: 0px 0px 6px 3px #888888 inset;
}
#topright {
  width: 50%;
  height: 60px;

  float: right;
}
#headerRight span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  text-overflow: ellipsis;
}
#headerRight {
  max-width: 100px;
  line-height: 60px;
}
#headerLeft {
  height: 40px;
  width: 40px;
  border: white 4px solid;
  border-radius: 100%;
  background-size: 100% 100%;
  margin: 6px;
}
.top {
  margin-top: 25px;
}
.top2 {
  display: block;
  margin-right: 5px;
  line-height: 36px;
}
</style>
